<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
</head>
<script type="text/javascript">
    $(function () {

        var pageNum = 1;
        var pName = $("#pName").val();
        var cName = $("#cName").val();
        // URL解码
        if (pName) {
            pName = window.decodeURIComponent(pName);
        }
        if (cName) {
            cName = window.decodeURIComponent(cName);
        }
        load(pageNum, pName, cName);
    });

    //分页条件查询
    function load(pageNum, pName, cName) {
        $.ajax({
            type: "post",
            url: "/area/pageArea",
            data: {pageNum: pageNum, pName: pName, cName: cName},
            dataType: "JSON",
            async: true,
            success: function (rm) {
                let list = rm.data.data;
                let str = ' <thead>\n' +
                    '            <tr>\n' +
                    '                <th>序号</th>\n' +
                    '                <th>省编号</th>\n' +
                    '                <th>省名称</th>\n' +
                    '                <th>市编号</th>\n' +
                    '                <th>市名称</th>\n' +
                    '            </tr>\n' +
                    '            </thead>\n' +
                    '<tbody>';
                for (let i = 0; i < list.length; i++) {

                    str += '            <tr>\n' +
                        '                <td>'+(i+1)+'</td>\n' +
                        '                <td>'+list[i].pnumber+'</td>\n' +
                        '                <td>'+list[i].pname+'</td>\n' +
                        '                <td>'+list[i].cnumber+'</td>\n' +
                        '                <td>'+list[i].cname+'</td>\n' +
                        '            </tr>';
                }
                str += '</tbody>';
                $("#areaList").html(str);

                $("#totalCount").html(rm.data.totalCount);
                $("#pageNum").html(rm.data.pageNum);

                let begin = rm.data.pageNum - 5;
                let end = rm.data.pageNum + 4;
                if (begin < 1) {
                    begin = 1;
                    if (rm.data.totalPage < 10) {
                        end = rm.data.totalPage;
                    } else {
                        end = 10;
                    }
                }

                if (end > rm.data.totalPage) {
                    end = rm.data.totalPage;
                    if (begin < 0) {
                        begin = 1;
                    } else {
                        if (rm.data.totalPage > 10) {
                            begin = rm.data.totalPage - 9;
                        } else {
                            begin = 1;
                        }
                    }
                }


                let index = '<li class="paginItem" onclick="javascript:load(1,\'' + pName + '\',\'' + cName + '\')"><a href="javascript:void(0)">首页</a></li>';
                let beforeNum = rm.data.pageNum - 1;
                if (beforeNum < 1) {
                    beforeNum = 1;
                }
                index += '<li class="paginItem" onclick="javascript:load(' + beforeNum + ',\'' + pName + '\',\'' + cName + '\')"><a href="javascript:void(0)"><span class="pagepre"></span></a></li>';
                for (let i = begin; i <= end; i++) {
                    if (i == rm.data.pageNum) {
                        index += '<li class="paginItem current" onclick="javascript:load(' + i + ',\'' + pName + '\',\'' + cName + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                    } else {
                        index += '<li class="paginItem" onclick="javascript:load(' + i + ',\'' + pName + '\',\'' + cName + '\')" ><a href="javascript:void(0)">' + i + '</a></li>';
                    }
                }
                let nextNum = rm.data.pageNum + 1;
                if (nextNum >= rm.data.totalPage) {
                    nextNum = rm.data.totalPage;
                }
                index += '<li class="paginItem" onclick="javascript:load(' + nextNum + ',\'' + pName + '\',\'' + cName + '\')"><a href="javascript:void(0)"><span class="pagenxt"></span></a></li>';
                index += '<li class="paginItem" onclick="javascript:load(' + rm.data.totalPage + ',\'' + pName + '\',\'' + cName + '\')" ><a href="javascript:void(0)">末页</a></li>';

                $("#paginList").html(index);
            }
            ,
            error: function (rm) {
                alert(rm.msg)
            }
        });
    }

    //点击查询
    function queryArea() {
        var pageNum = 1;
        var pName = $("#pName").val();
        var cName = $("#cName").val();

        load(pageNum, pName, cName);
    }
</script>
<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>采购管理</li>
        <li>品牌管理</li>
        <li>基本内容</li>
    </ul>
</div>
<div class="rightinfo">
    <form action="" method="post">
        <ul class="tools">
            <li> 省:
                <input type="text" id="pName" name="pName"/>
            </li>
            <li> 市:
                <input type="text" id="cName" name="cName"/>
            </li>
            <li class="subBut" onclick="queryArea()"><img src="../../../static/images/t06.png"/>查询</li>
        </ul>
        <table class="tablelist" id="areaList">
            <thead>
            <tr>
                <th>序号</th>
                <th>省编号</th>
                <th>省名称</th>
                <th>市编号</th>
                <th>市名称</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>110000</td>
                <td>北京市</td>
                <td>110100</td>
                <td>市辖区</td>
            </tr>
            <tr>
                <td>2</td>
                <td>110000</td>
                <td>北京市</td>
                <td>110200</td>
                <td>县</td>
            </tr>
            <tr>
                <td>3</td>
                <td>130000</td>
                <td>河北省</td>
                <td>130100</td>
                <td>石家庄市</td>
            </tr>
            <tr>
                <td>4</td>
                <td>130000</td>
                <td>河北省</td>
                <td>130200</td>
                <td>唐山市</td>
            </tr>
            </tbody>
        </table>
        <div class="pagin">
            <div class="message">共<i class="blue" id="totalCount">1256</i>条记录，当前显示第&nbsp;<i class="blue" id="pageNum">2&nbsp;</i>页</div>
            <ul class="paginList" id="paginList">
<!--                <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>-->
<!--                <li class="paginItem"><a href="javascript:;">1</a></li>-->
<!--                <li class="paginItem current"><a href="javascript:;">2</a></li>-->
<!--                <li class="paginItem"><a href="javascript:;">3</a></li>-->
<!--                <li class="paginItem"><a href="javascript:;">4</a></li>-->
<!--                <li class="paginItem"><a href="javascript:;">5</a></li>-->
<!--                <li class="paginItem more"><a href="javascript:;">...</a></li>-->
<!--                <li class="paginItem"><a href="javascript:;">10</a></li>-->
<!--                <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>-->
            </ul>
        </div>
    </form>
</div>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
